<template>
    <div>
       <div>
           <table class="table table-striped table-bordered table-hover">
               <thead>
                   <tr>
                       <th><input type="checkbox" v-model="checked" @click="checkAll"></th>
                       <th>ID</th>
                       <th>姓名</th>
                       <th>性别</th>
                       <th>借书日期</th>
                       <th>借书天数</th>
                       <th>是否归还</th>
                       <th>图书类型</th>
                       <th>图书名称</th>
                       <th>操作</th>
                   </tr>
               </thead>
               <tbody>
                   <tr v-for="(item,index) in userList" :key="index">
                       <td><input type="checkbox" v-model="checkList"></td>
                       <td>{{item.id}}</td>
                       <td>{{item.name}}</td>
                       <td>{{item.gender | formatGender}}</td>
                       <td>{{item.startTime}}</td>
                       <td>{{item.useDay}}</td>
                       <td>{{item.isback | formatBack}}</td>
                       <td>{{item.bookType}}</td>
                       <td>{{item.booksName  | formatBooks}}</td>
                       <td>
                           <button class="btn btn-primary"  @click="upUserDataClick(item)">修改</button>
                           <button class="btn btn-danger" @click="delBtnClick(item.id)">删除</button>
                           <button class="btn btn-default" @click="viewUserClick(item)">查看</button>
                       </td>
                   </tr>
               </tbody>
            </table>
       </div>
       <div class="pages">
          <Pagination></Pagination>
       </div>
        <div class="masker" v-show="mskStatus">
            <div class="dialog">
                <div class="dialog-head"> <h3>请确认是否删除此条信息?</h3></div>
                <div class="btn-box">
                    <button class="btn btn-default" @click="delBtnSure">确认</button>
                    <button class="btn btn-default" @click="cancelClick">取消</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Pagination from "../components/Pagination.vue";
import { mapState, mapActions,mapMutations } from "vuex";
// import { timingSafeEqual } from 'crypto';
export default {
  components: {
    Pagination
  },
  data() {
    return {
         mskStatus:false,
         delId:'',
         checked:false,
         checkList:[]
    };
  },
  computed: {
    ...mapState({
      userList: state => state.user.userList
    })
  },
  methods: {
    ...mapActions([
        "getUserList",'delData'
        ]),
         ...mapMutations([
       'getviewUserObj'
    ]),
    getList() {
      this.getUserList();
    },
    upclick() {
      console.log(this.userList);
    },
    delBtnClick(id) {
        this.delId = id
        this.mskStatus = true
    },
    delBtnSure(){
        this.delData(this.delId)
         this.mskStatus=false
    },
    cancelClick(){
        this.mskStatus = false
    },
    // 全选
    checkAll(){
        if(this.checked){
            this.checkList = false
        }else{
             this.checkList = true
             
        }
    },
    // 点击跳到修改页面
    upUserDataClick(item){
        this.$router.push({name:'upUserData',params:{item}})
    },
    viewUserClick(arr){
        let item =JSON.parse(JSON.stringify(arr))
        item.booksName=JSON.parse(item.booksName)[0].bookName
        this.$router.push({name:'ViewUserForm',params:{item}})
    }
  },
  watch:{
    //   'checkList':{
    //        handler(val,oldVal){
    //             if (val.length === this.userList.length) {
    //                     this.checked = true;
    //             } else {
    //                     this.checked = false;
    //             }
    //        }
    //   },
    //     deep: true
  },
  mounted() {
    this.getList();
  },
        //书名部分的过滤器
  filters:{
      formatBooks(val){
           let arr = JSON.parse(val)
          arr = arr.map((v,i) =>{
              return v.bookName
          })
          return arr.join('-')
      },
      formatGender(val){
          if(val==1){
              return '男'
          }else{
              return '女'
          }
      },
      formatBack(val){
          if(val==1){
              return '是'
          }else{
              return '否'
          }
      }
  }
 
};
</script>

<style scoped>
.pages {
  float: right;
}
.masker{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.5)
}
.dialog{
    width: 600px;
    height: 300px;
    background: #fff;
    margin: 50px auto;
    position: relative;
}
.btn-box{
    position: absolute;
    bottom: 30px;
    right: 30px;
}
.dialog-head{
    border-bottom: 1px solid #ccc;
    /* margin-left: 20px; */
}
.dialog-head h3{
    padding: 20px 0 4px 20px;
}
</style>